<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Lemon Team</title>
<script>
	//function clickOnPlaceItem(element){
		//alert(element.id)
	//}
	/*function searchBasic()
	{
		var location = $("#location").val();
		var price1 = $("#price1").val();
		alert(price1)
		var price2 = $("#price2").val();
		alert(location);
		$.ajax({
	    	url: "place/ajaxSearch",		        
	        type: 'GET',
	        data: {
		        name:price1,
		        sdf:price2,
		        sdf1:location
		     },
            contentType: "application/json; charset=utf-8",
	        dataType: 'json',
	        success: function(data) {			        
						       	
	        },
	        error : function(data) {
		        				
		    }
	    });
	}*/
</script>

</head>
<body>
	<div class="pagewrapper">
		<g:form action="search" controller="place">
			<div id="search" style="border: 1px solid #EEE;">
				<div style="width: 32%; height: 70px; background-color: white; position: absolute; z-index: 10;"></div>
				<div style="width: 25%; height: 70px; background-color: white; position: absolute; z-index: 10; left: 32%;">
					<div style="width: 100%; height: 25px; top: 0px; text-align: center; font-size: 120%">Location</div>
					<div style="width: 100%; height: 40px; top: 30px; text-align: center;">
						<input type="text"class="textfield-s" name="location" value="${params.location}" style="width: 70%;">
					</div>
				</div>
				<div style="width: 30%; height: 70px; background-color: white; position: absolute; z-index: 10; left: 57%;">
					<div
						style="width: 100%; height: 25px; top: 0px; text-align: center; font-size: 120%; position: absolute; z-index: 20;">Price</div>
					<div
						style="width: 100%; height: 40px; top: 25px; position: absolute; z-index: 20;">
						<input type="text" class="textfield-s" name="price1" value="${params.price1 }"
							style="width: 35%; left: 10%; position: absolute; z-index: 30;">
						<a
							style="width: 5%; left: 47.5%; text-decoration: none; position: absolute; z-index: 30; text-align: center;">-----</a>
						<input type="text" class="textfield-s" name="price2" value="${params.price2 }"
							style="width: 35%; right: 10%; position: absolute; z-index: 30;">
					</div>
				</div>

				<div id=showAdvancedSearch
					style="width: 5%; height: 70px; background-color: white; position: absolute; z-index: 10; left: 87%; font-size: 120%;">
					<!-- <div style="width: 100%;height: 25px;top:0px;text-align: center;font-size: 120%;position:absolute;z-index: 20;">Advanced</div>-->
					Advanced<a id="showAdvancedSearch" href="#"
						style="left: 40%; position: absolute; z-index: 20; top: 30px;">
						<img alt="Down" class="home-logo" src="${resource(dir: 'images', file: 'down.png')}" />
						<!-- <img alt="Down" class="home-logo" src="images/down.png" />-->
					</a>
				</div>
				<div
					style="width: 5%; height: 30px; background-color: white; position: absolute; z-index: 10; left: 94%; top: 20px; font-size: 120%;">
					<g:actionSubmit value="Search" controller="place" action="search" />
				</div>


			</div>

			<div id="searchadvanced" style="display: none">
				<table class="tbladvanced">
					<tr align="left">
						<td width="15%" colspan="5" class="tdadvanced">SELECTION</td>
						<td width="15%" colspan="5">PROPERTY TYPE</td>
						<td width="15%" colspan="5">BED ROOM</td>
						<td width="15%" colspan="5">BATH ROOM</td>
						<td width="14%" colspan="5">FEARTURE</td>
					</tr>
					<tr align="left">
						<td width="15%" colspan="5" class="tdadvanced"><input
							type="radio" id="buyId" name="type" value="true"> Buy</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="house" id="houseId" name="property"> House</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="1" id="bedId1" name="beds"> 1 Bed</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="1" id="bathId1" name="baths"> 1 Bath</td>
						<td width="14%" colspan="5"><input type="checkbox"
							value="air" id="airId" name="features"> Air</td>
					</tr>
					<tr align="left">
						<td width="15%" colspan="5" class="tdadvanced"><input
							type="radio" name="type" id="rentId" value="false">
							Rent</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="apartment" name="property" id="apartmentId">
							Apartment</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="2" id="bedId2" name="beds"> 2 Bed</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="2" id="bathId2" name="baths"> 2 Bath</td>
						<td width="14%" colspan="5"><input type="checkbox"
							value="celling" name="features" id="cellingId">Celling</td>
					</tr>
					<tr align="left">
						<td width="15%" colspan="5" class="tdadvanced">TRANSPORTATION</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="apartment building" name="property"
							id="apartmentBuildingId"> Apartment building</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="3" id="bedId3" name="beds"> 3 Bed</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="3" id="bathId3" name="baths"> 3 Bath</td>
						<td width="14%" colspan="5"><input type="checkbox"
							value="elevator" name="features" id="elevatorId">
							Elevator</td>
					</tr>
					<tr align="left">
						<td width="15%" colspan="5" class="tdadvanced"><input
							type="checkbox" value="Parking" name="features" id="parkingId">
							Parking</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="villa" id="villaId" name="property"> Villa</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="4" id="bedId4" name="beds"> 4 Bed</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="4" id="bathId4" name="baths"> 4 Bath</td>
						<td width="14%" colspan="5"><input type="checkbox"
							value="laundry" id="laundryId" name="features"> Laundry</td>
					</tr>
					<tr align="left">
						<td width="15%" colspan="5" class="tdadvanced"><input
							type="checkbox" value="garage" id="garageId" name="features">
							Garage</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="vondominium" id="condominiumId" name="property">
							Condominium</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="4+" id="bedIdMore4" name="beds"> 4+ Bed</td>
						<td width="15%" colspan="5"><input type="checkbox"
							value="4+ " id="bathIdMore4" name="baths"> 4+ Bath</td>
						<td width="14%" colspan="5"></td>
					</tr>
				</table>
			</div>

			<div id="map-canvas"
				style="width: 100%; height: 530px; float: left; margin-top: 0px; top: 68px;"></div>

			<div class="div-place-header-main" style="top: 72px;color: #4587BA; background-color: #e2e2e2;font-size: 110%;padding-top:2px" id="place">
				<g:if test="${places!=null}">
					${places.size()} place(s) has found
				</g:if>
				<g:else> 
					 No place has found
				</g:else>
				
			</div>
			<input type="button" id="openlist" class="list-open"
				style="top:72px;height:22px ;display:none; background-image: url(${resource(dir: 'images', file: 'btListOpen.png')}); ">
			<input type="button" id="closeList" class="list-close"
				style="top:72px;height:22px;background-image: url(${resource(dir: 'images', file: 'btListClose.png')}); ">

			<div id="listopen" class="bglist" style="height: 528px; top: 71px;">
				<div id="listopen2" class="style-scrollbar" style="top: 20px;">
					<g:each in="${places}" var="place">
						<script>
						 	var poi = {};
						 	var currentPlaceID;
						 	poi.id			= 	'${place.id}';
							poi.address 	= 	'${place.address}';
							poi.price		= 	'${place.price}';
							poi.lat 		= 	'${place.lat}';
							poi.lng 		= 	'${place.lng}';
							poi.imgpath		= 	'${createLink(uri:'/Avatar/getAvatar?placeID='+place.id)}'
							pois.push(poi);
						</script>
					
				<div class="placeitem" id="${place.id}" onMouseOver="onMouseIn(this)" onMouseOut="onMouseOut(this)" onClick="clickOnPlaceItem(this),listimage(this)" style=" margin-top:10px;;margin-left:15px;margin-right:15px;padding-top:15px;padding-left:25px;cursor:pointer" >
						<img id='${place.id}' src="${createLink(uri:'/Avatar/getAvatar?placeID='+place.id)}" width=160px height=140px style="float: right; margin-top:3px;margin-right:10px;margin-left:5px"/>
						<div style="font-size: 125%; color:#006bd7 ">Address: ${place.address}</div>
						<div class="" style="">Price: ${place.price} $</div>
						<div class="" style="padding-top: 10px">Description: ${place.description}</div>
					</div>
					</g:each>
				</div>
			</div>
		</g:form>
	</div>


	<div class="superContainer"
		style="position: absolute; top: 13%; left: 20% ; z-index: 70;">
		<div id="btn1">
			<input type="button" value="" class ="btnClose" onclick="isDelete();" />
		</div>
		<div class="container">

			<ul class="tabs" style="position: absolute; top: 5px; left: 10px;" >
				<li><a href="#tab1">Details</a></li>
				<li><a href="#tab2">Photo</a></li>
				<li><a href="#tab3">Feature</a></li>
				<li><a href="#tab4" onclick="subMap();">Right next services</a></li>
			</ul>
			<div class="tab_container"style="position: absolute; top:39px; left: 10px;">
						<div id="tab1" class="tab_content">				
						<div id="addressValue" style="width: 277px;height: 376px;background-color: #dddddd;color:#0053a6; position: absolute; float:right;top: 20px; left: 500px;padding-left:20px;padding-top:20px">
						</div>
						<div id="imageplace" style="width:470px;height:280px; position: absolute; float:left;top: 20px">
						
						</div>
						<div id="contactplace" style="width:460px;height:96px;background-color: #dddddd;color:#0053a6; position: absolute; float:left;top:300px;padding-left:20px;padding-top:20px">					
						</div>				
				</div>
				<div id="tab2" class="tab_content">
				 		<div id="123" class="style-scrollbar"
						style="width: 277px; height: 376px; 
						background-color: #dddddd; color: #0053a6; 
						position: absolute; float: right; 
						top: 0px; left: 500px; overflow: scroll;overflow-x:hidden;
						padding-left: 20px; padding-top: 20px; ">

						<div id="countOflike" style="float: left;"></div>
						<div id="myTask" style="padding-left: 10px">
							<a href="#" id="dislike" onclick="isLike1(this);"
								style="display: none">unlike</a> <a href="#" id="like"
								onclick="isLike1(this);" style="display: none">like</a>
						</div>

						<div id="listAllOldComment" class="style-scrollbar" style="margin-top: 10px;"></div>
						<div id="listAllComment"></div>
						 <input type="text" id="contentComment" name="q"
							onclick="ajaxComment1();" style="width: 240px;"></input> 
						
					</div>
						<div id="abc" style="width: 470px;height: 400px; background-color: #dddddd; position: absolute; float:left;top: 20px">
						<div id="galleria" style="height: 400px;">		
						</div>
					</div>						
				</div>
				<div id="tab3" class="tab_content">
					<h2>Resources</h2>
					<a href="#"><img alt="" /></a>
					<h3>
						<a href="#">hello3</a>
					</h3>
				</div>
				<div id="tab4" class="tab_content">
					<h2>Contact</h2>
				</div>
			</div>
		</div>
		 <div id="button" >
         	<input type="button" value="Add to Compare" style="position: absolute; top: 472px; left: 670px;  width: 120px;" />
            <input type="button"  id="test" onclick="isToFavourite();" value="Add to Favourite" style="position: absolute; top: 472px; left: 545px; width: 120px;" />
            <input type="button"  id="remove" onclick="isRemove();" value="Remove Favourite" style="position: absolute; top: 472px; left: 545px;display:none; width: 120px;" />
        </div>
	</div>
</body>
</html>